import {messages} from "share/common";
import React from 'react'
import { connect } from 'react-redux'
import { Steps, Input, Table, Switch } from 'antd';
const Step = Steps.Step;
const Search = Input.Search;
import SeniorService from 'containers/increment-service/senior-service-open/senior-service.service'
import 'styles/senior-service-open/open-setting.scss'
import moment from "moment";
import BankCompanyManagement from 'containers/supplier-management/bank-company-management/bank-company-management'

class OpenSetting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      columns: [
        {title: messages('senior-service-open.key24')/*法人名称*/, dataIndex: 'legalEntityName'},
        {title: messages('senior-service-open.key25')/*纳税人识别号*/, dataIndex: 'taxpayerNumber'},
        {title: messages('senior-service-open.key26')/*相关订单*/, dataIndex: 'orderCode'},
        {title: messages('senior-service-open.key27')/*开通日期*/, width: '10%', dataIndex: 'effectiveDate',
          render: text => {return (text ? moment(text).format('YYYY-MM-DD') : null)}},
        {title: messages('senior-service-open.key28')/*到期日期*/, width: '10%', dataIndex: 'expireDate',
          render: text => {return (text ? moment(text).format('YYYY-MM-DD') : null)}},
        {title: messages('senior-service-open.key29')/*是否启用查验*/, width: '10%', dataIndex: 'status',
          render: (value, record) => (this.renderCheck(value, record))}
      ],
      data: [],
      page: 0,
      pagination: {
        total: 0
      },
    }
  }

  componentWillMount(){
    this.getTableData();
  }

  renderCheck = (text, record) => {
    return(
      <div>
        <Switch checked={record.status} onChange={(checked) => this.enableCheck(checked, text, record)}/>
        <span>&nbsp;{text ? messages('common.status.enable')/*启用*/ : messages('common.status.disable')/*禁用*/}</span>
      </div>
    )
  };

  enableCheck = (checked, text, record) => {
    this.setState({
      loading: true,
    });
    let params =
    {
      id: record.id,
      tenantId: record.tenantId,
      legalEntityId: record.legalEntityId,
      serviceTypeCode: this.props.params.serviceCode,
    };
    SeniorService.enableCheck(checked, params).then(res => {
      this.setState({
        loading: false,
      }, () => {
        this.getTableData();
      });
      }
    ).catch(err => {
      this.setState({
        loading: false,
      });
    })
  };

  //获取列表数据
  getTableData = (value) => {
    const {page} = this.state;
    this.setState({
      loading: true,
    });
    let params = {
      page,
      size: 10,
      serviceTypeCode: this.props.params.serviceCode,
      legalEntityName: value === undefined ? "" : value,
    };
    SeniorService.getTableData(params).then(res => {
        this.setState({
          data: res.data,
          loading: false,
          pagination: {
            total: Number(res.headers['x-total-count']),
            current: this.state.page + 1,
            onChange: this.onChangePaper,
          }
        })
      }
    ).catch(err => {
      this.setState({
        loading: false,
      });
    })
  };

  //点击分页
  onChangePaper = (page) => {
    if (page - 1 !== this.state.page) {
      this.setState({
          page: page - 1,
        }, () => {
          this.getTableData();
        }
      )
    }
  };

  handleSearch = (value) => {
    this.setState({
      page: 0,
    }, () => {
      this.getTableData(value);
    });
  };

  render() {
    const { loading, columns, data, pagination } = this.state;
    return (
      <div className="open-setting">
        <Steps current={4} size="small">
          <Step title={messages('senior-service-open.key2')/*选择服务*/} />
          <Step title={messages('senior-service-open.key3')/*确认订单*/} />
          <Step title={messages('senior-service-open.key4')/*付款*/} />
          <Step title={messages('senior-service-open.key5')/*申请开票*/} />
          <Step title={messages('senior-service-open.key6')/*开通设置*/} />
        </Steps>
        {
          this.props.params.serviceCode === "BWE" ?
            <BankCompanyManagement/>
            :
            <div>
              <div className="table-header">
                <div
                  className="table-header-title"> {messages('senior-service-open.key32', {arg1: pagination.total})/*共搜索到 {arg1} 条数据*/}
                  <Search className="input-search"
                          placeholder={messages('senior-service-open.key33')/*请输入法人名称*/}
                          onChange={e => this.handleSearch(e.target.value)}/>
                </div>
              </div>
              <Table rowKey="legalEntityId"
                     columns={columns}
                     dataSource={data}
                     pagination={pagination}
                     loading={loading}
                     bordered
                     size="middle"/>
            </div>
        }
      </div>
    )
  }
}

OpenSetting.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
  }
}

export default connect(mapStateToProps)(OpenSetting)
